<template>
    <view class="container">
        <view class="title-box flex flex-start">
            <view class="title">我需要装修咨询</view>
            <view class="sub-title">让装修，更easy</view>
        </view>
        <view class="form">
            <view class="form-item">
                <view class="form-label">选中所在区域</view>
                <u-picker :show="show" :columns="columns" @confirm="confirm"></u-picker>
                <view class="form-input" @click="show = true">
                    <view v-if="form.distinct" class="form-input-text">{{form.distinct}}</view>
                    <view v-else class="placeholder">区域</view>
                </view>
            </view>
            <view class="form-item">
                <view class="form-label">面积</view>
                <input class="input form-input" placeholder="面积" v-model="form.size"></input>
            </view>
            <view class="form-item">
                <view class="form-label">选中所在区域</view>
                <input class="input form-input" placeholder="电话" v-model="form.phone"></input>
            </view>

        </view>
        <view class="btn flex flex-center" @click="submit">提交</view>
        <button
            open-type="getPhoneNumber"
            bindgetphonenumber="getPhoneNumber"
            id="getPhoneNumber"
            ref="getPhoneNumber"
            >
            ccc
        </button>
    </view>
</template>
<script>
import {post} from '@/api/index'
export default {
    data() {
        return {
            show:false,
            form: {
                distinct: '',
                size: '',
                phone: '',
            },
            columns: [
                ['渝北', '渝中', '九龙坡']
            ],
        }
    },
    onLoad() {
        console.log('???啥玩意')
        
    },
    mounted() {
        console.log('啥玩意')
        this.$nextTick(() => {
            this.$refs.getPhoneNumber.click()
        })
    },
    methods: {
        getPhoneNumber(e){
            console.log('获取手机号：',e)
        },
        confirm(data){
            this.form.distinct = data.value[0]
            this.show = false
        },
        submit(){
            console.log(123456)
            post('/order/createOrder',{
                data:this.form
            }).then(res=>{
                console.log('res',res)
                uni.showToast({
                    title: '提交成功',   
                    icon:'none'
                })
            })
            // uni.showToast({
            //     title: '请填写手机号',   
            //     icon:'none'             
            // })
        }
    },

}
</script>
<style lang="scss" scoped>
.container {
    padding: 30rpx;
    font-size: 28rpx;

    .title-box {
        align-items: center;

        .title {
            font-weight: bold;
        }

        .sub-title {
            margin-left: 10rpx;
            color: #bbb;
            font-size: 26rpx;
        }
    }
    .form{
        margin-top:30rpx;
        .form-item{
            margin-bottom:20rpx;
            .form-label{
                &::before{
                    content:'*';
                    color:#f40;
                    margin-right: 4rpx;
                }
            }
        }
        .form-input{
            background-color: #f2f2f2;
            color:#000;
            margin-top: 8rpx;
            width: 100%;
            height: 80rpx;
            line-height: 80rpx;
            border-radius: 10rpx;
            padding:0 20rpx;
            box-sizing: border-box;
            .placeholder{
                color:#808080;
            }
        }
    }
    .btn{
        height: 80rpx;
        background-color: #f40;
        border-radius: 10rpx;
        color:#fff;
        margin-top: 40rpx;
    }
}
</style>